<template>
	<view class="page">
		<view class="banner">
			<img src="" alt="" style="display: block;width: 500px;height: 350px;" >
		</view>
		<view class="login-box">
			<view class="title">LOGIN</view>
			<view class="form">
				<view class="form-item">
					<view class="label">登录账号</view>
					<input class="ipt" type="text" v-model="form.username" placeholder="请输入账号" />
				</view>
				<view class="form-item">
					<view class="label">登录密码</view>
					<input class="ipt" type="text" v-model="form.password" placeholder="请输入密码" />
				</view>
				<view class="form-item">
					<view class="label">验  证  码</view>
					<input class="ipt" type="text" v-model="form.password" placeholder="图形验证码" />
					<img class="img-code" src=""  />
				</view>
				<view class="form-item">
					<button type="primary" style="width: 100%;" @click="login">登录</button>	
				</view>
				<view class="form-item" style="float: right;color: #666;">
					<navigator url="/pages/login/password">忘记密码</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					username:'',
					password:'',
				}
			}
		},
		methods: {
			login(){
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
.login-box{
	margin-left: 20px;
	background: #f0f0f0;
	padding: 20px;
	width: 350px;
	border-radius: 5px;
	
	.title{
		text-align: center;
		font-size: 20px;
	}
	
	.form{
		margin: 20px 0;
		
		.form-item{
			display: flex;
			align-items: center;
			margin-top: 15px;
			.label{
				width: 4em;
				text-align: center;
				margin-right: 10px;
			}
			.ipt{
				flex: 1;
				background-color: #fff;
				padding: 10px;
			}
			.img-code{
				height: 42px;
				width: 100px;
				background: #fff;
			}
		}
	}
}
</style>
